<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../../css/utils/mui.min.css" />
	<link rel="stylesheet" href="../../css/utils/mui.picker.css" />
	<link rel="stylesheet" href="../../css/utils/mui.poppicker.css" />
	<title></title>
	<style>
		body {
			padding: 0;
			margin: 0;
			font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-size: 14px;
		}
		.content {
			/*padding: 10px;*/
		}
		.mui-table-view .mui-media-object {
			line-height: 60px;
		    max-width: 60px;
		    height: 60px;
		}
		.price-number {
			display: flex;
			justify-content: space-between;
		}
		
		.textarea-div {
			position: relative;
		}
		textarea {
			width: 96%;
			margin-left: 2%;
			margin-top: 12px;
			height: 150px;
			border-radius:8px ;
			font-size: 14px;
			color: #B7B7B7;
		}
		.editor-img {
			position: absolute;
		    left: 48%;
		    top: 66px;
		    width: 27px;
		    height: 23px;
		}
		.shopping{clear:both;overflow:hidden;height:auto;padding-bottom: 60px;background-color: #F3F3F3;}
		
		.shopping .addr-div{position: relative; width: 96%; margin-left: 2%; padding: 15px; background-color: #FFFFFF; border-radius: 6px;}
		.shopping .addr-name{font-size: 13px; color: #838383; font-family: "PingFang-SC-Regular";}
		.shopping .addr-phone{margin-left: 30px; font-size: 13px; color: #838383; font-family: "PingFang-SC-Regular";}
		.shopping .addr-info{font-size: 13px; color: #838383; font-family: "PingFang-SC-Regular";}
		.tochoose-div {position: absolute; right: 20px; top: 33%;}
		.tochoose-div .arrow-icon {width: 11px; height: 18px;}
		
	    .div-li {position: relative; border: 2px solid #F3F3F3;}
		.staff-info {width: 96%;margin-left: 2%;border-radius: 6px; height: 90px; background-color: #FFFFFF; position: relative;}
		.staff-info .goods-image-div {display: inline-block; margin-top: 14px; margin-left: 16px;}
		.staff-info .goods-image-div .goods-image {width: 63px !important; height: 63px;}
		.staff-info .goods-info {position: absolute; left: 95px; top: 24px;}
		.staff-info .goods-info .goods-name {font-size: 17px; color: #838383; font-family: "PingFang-SC-Regular";}
		.staff-info .goods-info .goods-specifications {font-size: 13px; color: #838383; font-family: "PingFang-SC-Regular";}
		.staff-info .goods-info .goods-price {font-size: 13px; color: #838383; font-family: "PingFang-SC-Regular";}
		.staff-info .goods-info .goods-price span{color: #EC6B44;}
		.staff-info .review-info-div {display: inline-block; float: right; margin-top: 24px; margin-right: 16px;}
		.staff-info .review-info-div .review-ratio {font-size: 15px; color: #EC6941; font-family: "PingFang-SC-Regular";}
		.staff-info .review-info-div .review-ratio span{color: #EC6941; font-size: 10px;}
		.staff-info .review-info-div .review-num {text-align: right; font-size: 10px; color: #838383; font-family: "PingFang-SC-Regular";}
		
		.payment-bar{clear:both;overflow:hidden;width:100%;height:49px;position:fixed;bottom:0;border-top:1px solid #e0e0e0;background:#fff;}
		.payment-bar .all-checkbox{float:left; width: 88px; height: 49px;}
		.payment-bar .all-checkbox .back-div{display: inline-block; width: 80px; height: 49px; background-color: #FFFFFF;}
		.payment-bar .all-checkbox .line-div{display: inline-block; width: 1px; height: 49px; background-color: #C5C5C5;}
		.payment-bar .total-num{display: inline-block; margin:14px 0px 9px 15px; font-size: 15px; color: #818181; font-family: "PingFang-SC-Regular";}
		.payment-bar .shop-total{display: block; float:right;-webkit-box-flex:1.0;box-flex:1.0;margin:14px 20px 9px 0px;}
		.payment-bar .shop-total div{display:block;font-size:13px; color: #737373; font-family: "PingFang-SC-Regular";}
		.payment-bar .settlement{display:inline-block;float:right;width:100px;height:49px;line-height:49px;text-align:center;color:#fff;font-family: "PingFang-SC-Regular"; font-size:15px;background:#fb511f;}
		.back-div {
			text-align: center;
		}
		.setting-div {
			margin-top: 14px;
			margin-bottom: 80px;
			width: 100%;
			background-color: #FFFFFF;
		}
		
		.item-div {
			margin-left: 14px;
			margin-right: 14px;
			height: 50px;
			position: relative;
		}
		
		.item-span {
			flex: 1;
			font-size: 15px;
			color: #515151;
			line-height: 50px;
			font-family: "PingFang-SC-ExtraLight";
		}
		
		.item-icon {
			width: 20px;
			height: 20px;
			position: absolute;
			right: 0px;
			top: 22px;
		}
		
		.line-div {
			width: 92%;
			height: 1px;
			margin-left: 4%;
			background-color: #F3F3F3;
		}
		input[type=text] {
			padding: 0px;
		    float: right;
    			width: 70%;
    			margin-top: 3px;
			margin-bottom: 0;
			height: 40px; 
			border-width: 0px;
			color:#515151;
			font-size: 15px;
			text-align: end;
			background-color: transparent;
		}
		::-webkit-input-placeholder{
		     font-size: 12px;
		     font-style: oblique;
		     text-align: end;
		}
		.display {
			display: flex;
		}
		.right-div {
			display: inline-block;
			float: right;
			height: 40px;
    			margin-top: 5px;
		}
		.right-span {
			line-height: 40px;
			font-size: 12px;
		    text-align: end;
		    color:#999;
		    font-style: oblique;
		}
		.attr-span-ed {
			line-height: 59px;
		    color:#515151;
			font-size: 15px;
			text-align: end;
		}
		.oder-no {
			display: none;
			padding: 10px;
		}
		.preferential {
			display: none;
			width: 100%;
			height: 50px;
			margin-top: 15px;
			background-color: #FFFFFF;
		}
		.item-tips-span {
			color: #515151;
			font-size: 14px;
			line-height: 50px;
			margin-left: 15px;
			margin-right: 15px;
		}
		.item-right-div {
			display: inline-block;
			float: right;
			height: 50px;
		}
		.choose-img {
			width: 11px;
			height: 18px;
			vertical-align: middle;
		}
		.bounced-box-container {
			display: none;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
		    z-index: 11;
	        overflow-y: scroll;
			background-color: rgba(0, 0, 0, 0.7);
		}
		.bounced-box-container .outside {
			width: 100%;
			height: 60%;
			position: absolute;
			left: 0px;
			bottom: 0px;
			background-color: #FFFFFF;
		}
		.box-confim {
			position: absolute;
			bottom: 0;
			margin-bottom: 0;
			height: 49px;
			color:#fff;
			font-family: "PingFang-SC-Regular"; 
			background:#fb511f;
		}
		.bounced-box-container .outside .title {
			margin: 15px 10px;
			color: #515151;
			font-size: 14px;
		}
		.total-price-span, .preferential-price, .preferential-vouchersID, .preferential-vouchersType {
			display: none;
		}
		.freight {
			font-size: 12px;
			color: #666;
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="goods-info">
			<div class="oder-no">订单号：</div>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<a href="javascript:;">
						<img id="goodsImg" class="mui-media-object mui-pull-left" src="../../img/home/company_header.png">
						<div class="mui-media-body">
							<div id="goodsName" class="mui-ellipsis-2"></div>
							<p id="standardName" class="mui-ellipsis">规格：</p>
							<div class="price-number">
								<span id="standardPrice" style="color: #E58014;">¥</span>
								<span id="purchaseNum">X1</span>
							</div>
							<div class="freight">运费：¥<span class="logistics_fee"></span></div>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="preferential">
			<span class="item-tips-span">活动推广优惠</span>
			<div class="item-right-div">
				<span class="total-price-span"></span>
				<span id="preferentialPriceSpan" class="item-tips-span"></span>
				<img class="choose-img" style="margin-right: 10px" src="../../img/phone/go_icon.png" />
			</div>
		</div>
		<div class="shopping">
			<div class="setting-div">
				<div class="item-div">
					<span class="item-span">收货人姓名:</span>
					<input type="text" id="name" placeholder="点击输入姓名"/>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">手机号码:</span>
					<input type="text" id="phone" placeholder="点击输入电话号码"/>
				</div>

				<div class="line-div"></div>
				<div id="cityChoose" class="item-div">
					<span class="item-span">省、市、区</span>
					<div class="right-div">
						<span class="right-span" id="country">请选择地址</span>
						<img class="choose-img" src="../../img/phone/go_icon.png" />
					</div>
				</div>
				<div class="line-div"></div>
				<div class="item-div">
					<span class="item-span">详细地址</span>
					<input type="text" id="school" placeholder="点击输入详细地址"/>
				</div>
			</div>
			<div class="textarea-div">
				<textarea id="orderMessage" placeholder="买家留言："></textarea>
				<img class="editor-img goods" src="../../img/phone/editor.png" />
			</div>
		</div>
		<div class="payment-bar">
			<div class="total-num"></div>
			<div id="payOrder" payCheck="0" class="settlement">去支付</div>
			<div class="shop-total">
				<div>¥<i class="total" id="AllTotal">0.00</i></div>
			</div>
		</div>
		<div class="bounced-box-container">
			<div class="outside">
				<div class="title">店铺优惠</div>
				<ul class="mui-table-view mui-table-view-radio">
					<!--<li class="mui-table-view-cell">
						<a class="mui-navigate-right">省40元</a>
					</li>
					<li class="mui-table-view-cell mui-selected">
						<a class="mui-navigate-right">省50元</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right">省80元</a>
					</li>-->
				</ul>
				<button type="button" type="button" class="mui-btn mui-btn-block box-confim">关闭</button>
			</div>
		</div>
	</div>	
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
	<script type="text/javascript" src="../../js/utils/mui.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../../js/utils/spin.min.js"></script>
	<script type="text/javascript" src="../../js/utils/mui.picker.js"></script>
	<script type="text/javascript" src="../../js/utils/mui.poppicker.js"></script>
	<script type="text/javascript" src="../../js/utils/city.data.js"></script>
	<script type="text/javascript" src="../../js/utils/city.data-3.js"></script>
	<script type="text/javascript" src="../../js/utils/regular.js" ></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script>
		var addrPicker;
		var customerID = base.getParameter("customerID");
		var companyID = base.getParameter("companyID");
		var goodsID = base.getParameter("goodsID");
		var goodsSpecID = base.getParameter("goodsSpecID");
		var vouchersID,vouchersType;
		var tempGoodsStandardStr = localStorage.getItem("goodsStandardInfo");
		(function($, doc) {
			$.init();
			initWX();//初始化微信
			$.ready(function() {
				initOrderData();
				addrPicker = new $.PopPicker({
					layer: 3
				});
				addrPicker.setData(cityData3);
			});
			getMyUserVouchers();
		})(mui, document);
		function initWX() {
			//初始化微信
			base.initWX(companyID);
		}
		function initOrderData(){
			var goodsStandardInfo = eval('(' + tempGoodsStandardStr + ')');
			$("#goodsImg").attr("src", goodsStandardInfo.goodsImg);
			$("#goodsName").html(goodsStandardInfo.goodsName);
			$("#standardName").html("规格："+goodsStandardInfo.standardName);
			$("#standardPrice").html("¥"+goodsStandardInfo.standardPrice);
			$("#purchaseNum").html("X "+goodsStandardInfo.purchaseNum);
			if (goodsStandardInfo.freeLogistics != 0 && parseFloat(goodsStandardInfo.purchaseNum*goodsStandardInfo.standardPrice) >= parseFloat(goodsStandardInfo.freeLogistics)) {
				$(".logistics_fee").text(0);
				$("#AllTotal").text(parseFloat(goodsStandardInfo.purchaseNum*goodsStandardInfo.standardPrice));
				$(".total-price-span").text(parseFloat(goodsStandardInfo.purchaseNum*goodsStandardInfo.standardPrice).toFixed(2));
			}else{
				$(".logistics_fee").text(goodsStandardInfo.logisticsFee);	
				$("#AllTotal").text(parseFloat(goodsStandardInfo.purchaseNum*goodsStandardInfo.standardPrice)+parseFloat(goodsStandardInfo.logisticsFee));
				$(".total-price-span").text((parseFloat(goodsStandardInfo.purchaseNum*goodsStandardInfo.standardPrice)+parseFloat(goodsStandardInfo.logisticsFee)).toFixed(2));
			}
			
			base.postData(base.url.getAddress, {customerID:customerID}, function(data){
				if (data.success) {
					var address = data.context.address;
					$("#name").val(address.takeDeliveryName);
					$("#phone").val(address.phone);
					$("#country").text(address.address);
					$("#school").val(address.detailedAddress);
				}
			});
		}
		$("#cityChoose").on("tap", ".right-div", function() {
			document.activeElement.blur();
			addrPicker.show(function(items) {
				$("#country").attr("class", "attr-span-ed");
				var areaName = _getParam(items[0], 'text')  + "-" + _getParam(items[1], 'text')  + "-" + _getParam(items[2], 'text');
				$("#country").text(areaName);
				//返回 false 可以阻止选择框的关闭
				//return false;
			});
		});
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		
		$("#payOrder").on("tap", function(){
			if ($(this).attr("payCheck") == '1') {
				return;
			}
			if ($("#name").val() == "") {
				mui.toast("收货人姓名不能为空");
				return;
			}
			if (!checkPhone($("#phone").val())) {
				mui.toast("电话号码格式不对");
				return;
			}
			if ($("#country").text() == "" || $("#country").text() == "请选择地址") {
				mui.toast("请选择地址");
				return;
			}
			if ($("#school").val() == "") {
				mui.toast("请填写详细地址");
				return;
			}
			var goodsStandardInfo = eval('(' + tempGoodsStandardStr + ')');
			var data = {
				goodsID:goodsID,
				goodsSpecID:goodsSpecID,
				customerID:customerID,
				companyID:companyID,
				articleID:goodsStandardInfo.articleID,
				purchaseNum:goodsStandardInfo.purchaseNum,
				orderMessage:$("#orderMessage").val(),
				takeDeliveryName:$("#name").val(),
				phone:$("#phone").val(),
				address:$("#country").text(),
				detailedAddress:$("#school").val(),
				vouchersID: vouchersID,
				vouchersType: vouchersType,
			}
			base.postData(base.url.addGoodsOrderSpec, data, function(data){
				if (data.success) {
					localStorage.removeItem("goodsStandardInfo"); //清除缓存的下订单数据
					if (data.context.status == 0) { //status = 0 不需要吊起微信支付 说明支付价格等于0元
						window.location.href = "goodsOrder.html?customerID="+customerID+"&companyID="+companyID;
					} else {
						var orderNo = data.context.orderNo; 
						if (window.__wxjs_environment === 'miniprogram'){   
							var params = '?customerID='+customerID+'&companyID='+companyID+'&orderNo='+orderNo;  
							//定义path 与小程序的支付页面的路径相对应  
							var path = '/pages/wxpay/wxpay'+params;  
							//通过JSSDK的api使小程序跳转到指定的小程序页面  
							wx.miniProgram.navigateTo({url: path});      
						} else {
							base.weChatPay({orderNo: orderNo,customerId:customerID}, function(rse) {
								$(".oder-no").html("订单号："+orderNo);
								$("#payOrder").css("background","#A1A1A1");
								$("#payOrder").attr("payCheck", "1");
								mui.toast("支付成功");
		                        setTimeout(function(){
		                            window.location.href = "goodsOrder.html?customerID="+customerID+"&companyID="+companyID;
		                        }, 2000);
							});
						}
					}
				}else{
					mui.toast(data.msg);
				}
			});
		});
		function getMyUserVouchers() {
			var params = {
				goodsID:goodsID,
				customerID:customerID,
				companyID:companyID
			}
			base.postData(base.url.getMyUserVouchers, params, function(data) {
				if (data.success) {
					var _myUserVouchers = data.context.vouchersList.concat(data.context.discountCouponsList);
					if (_myUserVouchers.length > 0) {
						$(".preferential").show();
						var lihtml = '';
						var totalPrice = $(".total-price-span").text();
						var _preferentialPrice = 0.0;
						var defaultDiscountPrice = 0.0;
						var len = _myUserVouchers.length;
						for(var i=0;i<len;i++) { //冒泡排序 把满足条件的拍在数组中第一个（如满10减，如果总价为5，即把券小于5的优先排在第一）
							for(var j=0;j<len-1-i;j++) {
								if(totalPrice>_myUserVouchers[i].discount) {
									break;
								} else {
									if(_myUserVouchers[j].discount>_myUserVouchers[j+1].discount) {    
										var temp = _myUserVouchers[j+1];//元素交换
										_myUserVouchers[j+1]=_myUserVouchers[j];
										_myUserVouchers[j]=temp;
									}
								}
							}
						}
						for (var index in _myUserVouchers) {
							var tipsStr = ""; 
							if (_myUserVouchers[index].vouchersType == 1) {
								tipsStr = "<span>省</span><span style='color: #E58014;'>"+_myUserVouchers[index].discount+"元</span><span>（"+_myUserVouchers[index].discount+"元代金券）    满"+_myUserVouchers[index].fullRedPrice+"元减</span>";
								_preferentialPrice = totalPrice - _myUserVouchers[index].discount;
							} else {
								var discountPrice = (totalPrice * _myUserVouchers[index].discount/10).toFixed(2);
								tipsStr = "<span>省</span><span style='color: #E58014;'>"+(totalPrice*1-discountPrice).toFixed(2)+"元</span><span>（"+_myUserVouchers[index].discount+"折打折券）</span>";
								defaultDiscountPrice = totalPrice * _myUserVouchers[0].discount/10;
								_preferentialPrice = totalPrice * _myUserVouchers[index].discount/10;
							}
							if (index == 0) {
								if (_myUserVouchers[index].vouchersType == 1) {
									vouchersID = _myUserVouchers[index].vouchersID;
									vouchersType = _myUserVouchers[index].vouchersType;
									var allTotalPrice = totalPrice-_myUserVouchers[index].discount;
									$("#AllTotal").text(allTotalPrice>0?allTotalPrice.toFixed(2):0);
									$("#preferentialPriceSpan").html("省<span style='color: #E58014;'>"+(_myUserVouchers[0].discount||0)+"</span>元"+"（"+_myUserVouchers[0].discount+"元代金券）"+"满"+_myUserVouchers[0].fullRedPrice+"减");
								} else {
									var tempPrice = parseFloat(totalPrice)-defaultDiscountPrice;
									$("#AllTotal").text(defaultDiscountPrice>0?defaultDiscountPrice.toFixed(2):0);
									$("#preferentialPriceSpan").html("省<span style='color: #E58014;'>"+(tempPrice>0?tempPrice.toFixed(2):0)+"</span>元（"+_myUserVouchers[0].discount+"折打折券）");
								}
								lihtml += '<li class="mui-table-view-cell mui-selected">'
							} else {
								lihtml += '<li class="mui-table-view-cell">'
							}
							lihtml += '	<a class="mui-navigate-right">'+tipsStr+'</a>'
							lihtml += '	<span class="preferential-price">'+(_preferentialPrice >0 ? _preferentialPrice.toFixed(2):0) +'</span>'
							lihtml += '	<span class="preferential-vouchersID">'+_myUserVouchers[index].vouchersID+'</span>'
							lihtml += '	<span class="preferential-vouchersType">'+_myUserVouchers[index].vouchersType+'</span>'
							lihtml += '</li>'
						}
						$(".mui-table-view.mui-table-view-radio").html(lihtml);
					}
				}
			});
		}
		$(".bounced-box-container .outside").on('tap','.box-confim',function(){
			$("body").css("overflow-y", "hidden");
			$(".bounced-box-container").hide();
			return false;
		});
		$(".preferential").on("tap", ".item-right-div", function() {
			document.activeElement.blur();
			$("body").css("overflow-y", "hidden");
			$(".bounced-box-container").show();
		});
		$(".mui-table-view.mui-table-view-radio").on("tap", ".mui-table-view-cell", function() {
			console.log($(this).find(".mui-navigate-right span").text());
			vouchersID = $(this).find(".preferential-vouchersID").text();
			vouchersType = $(this).find(".preferential-vouchersType").text();
			$("#preferentialPriceSpan").text($(this).find(".mui-navigate-right span").text());
			$("#AllTotal").text($(this).find(".preferential-price").text());//原始总价减去优惠价后的支付价钱
		})
	</script>
</body>
</html>
